<template>
  <div class="coupons-container">
    <h2>优惠券中心</h2>
    
    <!-- 优惠券列表 -->
    <div class="coupons-grid">
      <div v-for="coupon in coupons" :key="coupon._id" class="coupon-card">
        <div class="coupon-amount" :class="{ 'percentage': coupon.type === 'percentage' }">
          {{ formatAmount(coupon) }}
        </div>
        <div class="coupon-info">
          <h3>{{ coupon.name }}</h3>
          <p>{{ coupon.description }}</p>
          <div class="coupon-validity">
            有效期至: {{ formatDate(coupon.expiryDate) }}
          </div>
          <div class="coupon-conditions">
            <span>最低消费: ¥{{ coupon.minPurchase }}</span>
          </div>
        </div>
        <button 
          @click="claimCoupon(coupon._id)"
          :disabled="coupon.claimed || !isAuthenticated"
          class="claim-btn"
          :class="{ 'claimed': coupon.claimed }"
        >
          {{ coupon.claimed ? '已领取' : '立即领取' }}
        </button>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading">
      加载中...
    </div>

    <!-- 错误提示 -->
    <div v-if="error" class="error-message">
      {{ error }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useUserStore } from '@/stores/user'
import api from '@/api'

interface Coupon {
  _id: string
  name: string
  description: string
  type: 'fixed' | 'percentage'
  amount: number
  minPurchase: number
  expiryDate: string
  claimed?: boolean
}

const userStore = useUserStore()
const { isAuthenticated } = userStore

const coupons = ref<Coupon[]>([])
const loading = ref(false)
const error = ref('')

// 格式化优惠券金额显示
const formatAmount = (coupon: Coupon) => {
  if (coupon.type === 'fixed') {
    return `¥${coupon.amount}`
  }
  return `${coupon.amount}%`
}

// 格式化日期显示
const formatDate = (date: string) => {
  return new Date(date).toLocaleDateString('zh-CN')
}

// 领取优惠券
const claimCoupon = async (couponId: string) => {
  if (!isAuthenticated) {
    error.value = '请先登录后再领取优惠券'
    return
  }

  try {
    await api.post(`/coupons/${couponId}/claim`)
    const coupon = coupons.value.find(c => c._id === couponId)
    if (coupon) {
      coupon.claimed = true
    }
  } catch (err: any) {
    error.value = err.response?.data?.message || '领取优惠券失败'
  }
}

// 获取优惠券列表
const fetchCoupons = async () => {
  loading.value = true
  error.value = ''
  
  try {
    const response = await api.get('/coupons/available')
    coupons.value = response.data
  } catch (err: any) {
    error.value = '获取优惠券列表失败'
  } finally {
    loading.value = false
  }
}

onMounted(fetchCoupons)
</script>

<style scoped>
.coupons-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.coupons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.coupon-card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  position: relative;
  overflow: hidden;
}

.coupon-amount {
  font-size: 32px;
  font-weight: bold;
  color: #ff4d4f;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  border-right: 1px dashed #e0e0e0;
}

.coupon-amount.percentage {
  color: #722ed1;
}

.coupon-info {
  flex: 1;
  padding: 0 20px;
}

.coupon-info h3 {
  margin: 0 0 10px 0;
  color: #333;
}

.coupon-info p {
  color: #666;
  font-size: 14px;
  margin-bottom: 10px;
}

.coupon-validity {
  font-size: 12px;
  color: #999;
  margin-bottom: 5px;
}

.coupon-conditions {
  font-size: 12px;
  color: #666;
}

.claim-btn {
  position: absolute;
  right: 20px;
  bottom: 20px;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background-color: #ff4d4f;
  color: white;
  cursor: pointer;
  transition: all 0.3s;
}

.claim-btn:hover:not(:disabled) {
  background-color: #ff7875;
}

.claim-btn:disabled {
  background-color: #d9d9d9;
  cursor: not-allowed;
}

.claim-btn.claimed {
  background-color: #52c41a;
}

.loading {
  text-align: center;
  padding: 20px;
  color: #666;
}

.error-message {
  color: #ff4d4f;
  text-align: center;
  padding: 10px;
  margin-top: 10px;
}
</style> 